<template>
  <a-card class="content-card" title="添加脚本">
    <a-switch
      slot="extra"
      v-model="scriptFormData.isGreasyFork"
      checked-children="油猴脚本"
      un-checked-children="不是油猴脚本"
    />
    <a-form-model :model="scriptFormData" :label-col="{ span: 5 }" :wrapper-col="{ span: 1 }">
      <div v-if="!scriptFormData.isGreasyFork">
        <a-form-model-item label="脚本名称">
          <a-input v-model="scriptFormData.scriptName" />
        </a-form-model-item>
        <a-form-model-item label="脚本版本">
          <a-input v-model="scriptFormData.scriptVersion" />
        </a-form-model-item>
        <a-form-model-item label="脚本描述">
          <a-input v-model="scriptFormData.scriptDesc" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="响应地址">
          <a-textarea v-model="scriptFormData.scriptMatch" placeholder="脚本响应的地址,每行一个" :rows="2" />
        </a-form-model-item>
        <a-form-model-item label="引入外部库">
          <a-input v-model="scriptFormData.scriptRequire" placeholder="脚本所需的外部资源" />
        </a-form-model-item>
      </div>
      <a-form-model-item label="运行时机">
        <a-select v-model="scriptFormData.scriptRetention" placeholder="文档加载完毕时">
          <a-select-option value="document-start">document-start</a-select-option>
          <a-select-option value="document-body">document-body</a-select-option>
          <a-select-option value="document-end">document-end</a-select-option>
          <a-select-option value="document-idle">document-idle</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="脚本内容">
        <!-- <a-input v-model="scriptFormData.scriptText" type="textarea" /> -->
        <a-button type="primary" @click="scriptTextVisible = true">编辑代码</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="form-footer">
      <a-button-group style="float: right;margin-right: 61px;">
        <a-button type="primary" @click="saveScriptFormData">保存</a-button>
        <a-button @click="scriptFormData = {}">重置</a-button>
      </a-button-group>
    </div>
    <div class="script_text_modal">
      <a-modal
        width="90vw"
        v-model="scriptTextVisible"
        title="编辑代码"
        @ok="scriptTextVisible = false"
      >
        <quill-editor
          style="height: 280px;"
          v-model="scriptTextHtml"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange"
        ></quill-editor>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
import { addScript } from '@/api/request/user.js'

export default {
  data () {
    return {
      scriptFormData: {},
      scriptTextVisible: false,
      scriptTextHtml: '',
      editorOption: {
        modules: {
          toolbar: [
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方 
            }
          }
        }
      }
    }
  },
  methods: {

    onEditorChange ({ editor, html, text }) {
      this.scriptTextHtml = html
      this.scriptFormData.scriptText = text
    },
    saveScriptFormData () {
      addScript(this.scriptFormData).then(res => {
        this.$success({
          title: '提示',
          content: '保存成功',
        });
      })
    }
  },
}
</script>


<style scope>
.content-card {
  width: 450px;
  overflow: auto;
}

.form-footer {
  width: 100%;
  float: right;
  margin-right: 60px;
}
.ql-toolbar {
  display: none;
}
.ql-container {
  /* background-color: #222222; */
}
.ql-editor {
  font-size: 1.2rem;
}
</style>    